<template>
  <div class="content">
    <el-form
      ref="form"
      :model="form"
      label-width="90px"
    >
      <el-row>
        <el-col :span="18">
          <el-form-item label="操作时间段">
            <el-date-picker
              v-model="form.starttime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width: 170px;"
            ></el-date-picker>~
            <el-date-picker
              v-model="form.endtime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width: 170px;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col
          :span="6"
          style="text-align: right;"
        >
          <el-button
            type="primary"
            style="width: 120px;"
            @click="query"
          >查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="two_el_row">
      <el-col :span="18">
        <div style="width:100px;height:2px"></div>
      </el-col>
      <el-col :span="6">
        <div
          class="lowerBrick fr"
          @click="lowerBrick"
        >
          <img
            src="../../../assets/img/lowerBrick.png"
            alt
            style="margin-right:6px"
          >
          <span>下钻</span>
        </div>
      </el-col>
    </el-row>

    <div class="member-apply1">
      <div id="jhTable">
        <!-- 待审核 -->
        <el-table
          class="table"
          stripe
          border
          cell-class-name="common-table__cell"
          header-cell-class-name="common-table__header"
          :data="waiteList"
          style="width: 100%"
          v-show="current === 1"
        >
          <el-table-column
            fixed
            prop="name"
            label="会员名称"
            align="center"
          ></el-table-column>
          <!-- <el-table-column prop="cardnum" label="证件类型" align="center">
        </el-table-column>-->
          <el-table-column
            prop="cardtype"
            label="证件类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="cardnum"
            label="证件号码"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="birthdate"
            label="出生年月"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="banktype"
            label="提现银行"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="usenum"
            label="提现银行账户"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="telnum"
            label="手机号码"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="outintegral"
            label="提现金额(元)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="personaltax"
            label="个人所得税(元)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="fee"
            label="手续费(元)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="arriveintegral"
            label="实际到账金额(元)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="inserdate"
            label="申请时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="operationdate"
            label="操作时间"
            align="center"
          ></el-table-column>
          <el-table-column
            label="操作"
            min-width="100px"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="lookLog(scope.row)"
                type="text"
                size="small"
              >查看日志</el-button>
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                class="operate"
                @click="openDialog(scope.row)"
                v-if="waiteList.length>0"
              >审批</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 页码数 -->
        <div
          class="table-pagination-number"
          style="padding: 20px 0;"
          v-if="waiteList.length>0"
        >

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="PageCurrentChange"
            :current-page="Page.pageNum"
            :page-sizes="[10,20, 30, 50,100]"
            :page-size="Page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Page.total"
            background
          ></el-pagination>

        </div>
      </div>

      <el-dialog
        width="50%"
        :visible.sync="dialogTableVisible"
        class="jhdialog"
      >
        <!-- <div class="dialog">
        <el-row>
          <el-col :span="12">
            <el-radio v-model="radio" label="1">提现成功</el-radio>
          </el-col>
          <el-col :span="12">
            <el-radio v-model="radio" label="2">提现失败</el-radio>
          </el-col>
        </el-row>
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
        </el-input>
        <div class="btn">
          <button @click="concelCash()">取消</button>
          <button @click="confirmCash()">确定</button>
        </div>
      </div>-->
        <div class="comTitle clearfix">
          <div
            class="titleName fl"
            v-html="companyInfo.nickname"
          ></div>
          <!-- <div :class="{'fr':true,'status':current===1,'pass':current===2,'red':current===3}">{{tabs[current-1].label}}</div> -->
        </div>
        <div style="padding:0 20px 20px;">
          <div class="title">提现信息</div>
          <ul class="info clearfix">
            <li>
              <div class="infoLabel">会员名称:</div>
              <div
                class="infoText"
                v-html="companyInfo.name"
              ></div>
            </li>
            <li>
              <div class="infoLabel">证件号码:</div>
              <div
                class="infoText"
                v-html="companyInfo.cardnum"
              ></div>
            </li>
            <li>
              <div class="infoLabel">提现银行:</div>
              <div
                class="infoText"
                v-html="companyInfo.banktype"
              ></div>
            </li>
            <li>
              <div class="infoLabel">银行账户:</div>
              <div
                class="infoText"
                v-html="companyInfo.usenum"
              ></div>
            </li>
            <li>
              <div class="infoLabel">手机号码:</div>
              <div
                class="infoText"
                v-html="companyInfo.telnum"
              ></div>
            </li>
            <li>
              <div class="infoLabel">提现金额:</div>
              <div
                class="infoText red"
                v-html="`${companyInfo.outintegral}元`"
              ></div>
            </li>
            <li>
              <div class="infoLabel">个人所得税(元):</div>
              <!-- <div class="infoText" v-html="companyInfo.nickname"></div> -->
              <div
                class="infoText red"
                v-html="`${companyInfo.personaltax}元`"
              ></div>
            </li>
            <li>
              <div class="infoLabel">手续费(元):</div>
              <div
                class="infoText red"
                v-html="`${companyInfo.fee}元`"
              ></div>
            </li>
            <li>
              <div class="infoLabel">申请时间:</div>
              <div
                class="infoText"
                v-html="companyInfo.inserdate"
              ></div>
            </li>
            <li>
              <div class="infoLabel">到账金额:</div>
              <div
                class="infoText red"
                v-html="`${companyInfo.arriveintegral}元`"
              ></div>
              <div style="color:#959595;font-size:14px;display:inline-block">(税后)</div>
            </li>
          </ul>
          <div
            v-if="current===1"
            class="tabShow"
          >
            <div class="title">提现审批结果</div>
            <div style="height:40px;display: flex;align-items: center;">
              <el-radio-group
                v-model="radio"
                style="padding:0 20px"
                @change="resultChange"
              >
                <el-radio label="1">通过</el-radio>
                <el-radio label="2">未通过</el-radio>
              </el-radio-group>
              <el-input
                v-show="radio==='2'"
                style="width:400px"
                placeholder="请填写未通过原因"
                v-model="textarea"
              ></el-input>
            </div>
            <div
              slot="footer"
              class="dialog-footer"
            >
              <el-button @click="concelCash">取消</el-button>
              <el-button
                type="primary"
                @click="confirmCash"
              >提 交</el-button>
            </div>
          </div>
          <div
            class="tabShow"
            v-if="current!==1"
          >
            <div class="title">提现审批信息</div>
            <ul class="info clearfix">
              <li>
                <div class="infoLabel">审批结果:</div>
                <!-- <div
                :class="{'infoText':true,'pass':current===2,'red':current===3}"
                v-html="tabs[current-1].label"
              ></div> -->
              </li>
              <li>
                <div class="infoLabel">审批人:</div>
                <div
                  class="infoText"
                  v-html="companyInfo.auditorid"
                ></div>
              </li>
              <li>
                <div class="infoLabel">审批时间:</div>
                <div
                  class="infoText"
                  v-html="companyInfo.auditdate"
                ></div>
              </li>
              <li v-if="current===3">
                <div class="infoLabel">失败原因:</div>
                <div
                  class="infoText"
                  v-html="companyInfo.note"
                ></div>
              </li>
            </ul>
          </div>
        </div>
      </el-dialog>
    </div>
    <el-dialog
      :visible.sync="showLog"
      width="1024px"
      custom-class="showlog"
    >
      <showLog :reportid="reportId"></showLog>
    </el-dialog>
  </div>
</template>

<style scoped lang='less'>
@import "../../socical/socialCheck/check.less";
.content {
  background: #ffffff;
  padding: 0 20px;
}
.el-row {
  padding-top: 20px;
}
.two_el_row {
  padding-top: 0px;
}
.lowerBrick {
  color: #0064e4;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 18px;
  border: 1px solid #0064e4;
  padding: 0 26px;
  cursor: pointer;
  margin-bottom: 10px;
}
.member-apply1 {
  background: #fff;
  // margin: 0 18px;
  // max-height: 500px;
  padding-bottom: 20px;

  .table {
    border: 1px solid #d2d2d2;
  }
  .dialog-footer {
    margin-top: 20px;
    text-align: center;
  }
}
//查询样式

/* .item-search:nth-child(2){
    margin-left: 50px;
    margin-right: 50px;
} */
.item-search span {
  margin-right: 5px;
  white-space: nowrap;
  display: inline-block;
  font-size: 14px;
  color: #727272;
}
.item-search:nth-child(3) > .regions {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item-data-serach {
  margin-top: 5px;
}
.item-botton {
  width: 100px;
  height: 40px;
  line-height: 40px;
  margin: 5px 20px 5px 0px;
  color: #ffffff;
  cursor: pointer;
  background-color: #0064e4;
  text-align: center;
  border-radius: 4px;
}
.btn-right {
  display: flex;
  align-items: center;
}
.btn-right .btn {
  text-align: center;
  width: 96px;
  height: 40px;
  line-height: 40px;
  background-color: #ffffff;
  border-radius: 20px;
  cursor: pointer;
  border: solid 1px #0064e4;
}
.btn-right .btn:first-child {
  margin-right: 10px;
}
</style>
<style>
.member-apply1 .el-dialog__header {
  padding-bottom: 0;
}
/* .main {
  padding: 0 20px;
} */
</style>

<script>
import showLog from "../../backlog/showLog.vue";
export default {
  components: {
    showLog
  },
  data () {
    return {
      form: {
        starttime: "",
        endtime: "",
        type: '',
        pagesize: 10,
        pagenum: 1,
        total: 0,
        userid: this.$route.params.userid || JSON.parse(localStorage.getItem('userinfo')).userid
      },
      list: [],
      current: 1,
      dialogTableVisible: false,
      radio: "1", //提现状态
      textarea: "",
      bankInfo: ['中国银行', '中国工商银行', '中国农业银行', '中国邮政储蓄银行'], // 银行类型
      waiteList: [],
      outid: '', //待审核id
      // 页码数
      Page: {
        total: 10,
        pageNum: 1,
        pageSize: 10
      },
      companyInfo: {},
      level: '0',
      addressOptions: [],
      global: {},
      reportId: "",
      showLog: false
    }
  },
  props: ['type'],
  created () {
    this.getData();
  },
  methods: {
    //查询
    query () {
      this.Page.pageNum = 1;
      this.getData();
    },
    //下钻
    lowerBrick () {
      this.$router.push({
        name: 'lowerBrickList', //跳转的路径
        params: {
          type: this.type,
          userid: this.form.userid
        }
      })
    },
    // 待审核
    getData (p) {
      this.form.type = this.type;
      if (this.form.starttime && this.form.endtime && Date.parse(this.form.starttime) > Date.parse(this.form.endtime)) {
        this.$message({
          message: "结束时间不能早于开始时间",
          type: "warning"
        });
        return;
      }
      this.$axios.post('/app/v1/platform/unusual/logList', this.form).then(resp => {
		console.log(resp);
        if (resp.data.code == '1') {
          this.waiteList = resp.data.data.list || [];
          this.form.total = Number(resp.data.data.totalnum);
          this.form.pagesize = Number(resp.data.data.pagesize);
          // for (let i = 0; i < resp.data.data.list.length; i++) {
          //   this.waiteList[i].bankname = this.bankInfo[resp.data.data.list[i].banktype];
          // }
          this.loading = false;

        }
      }).catch({})

    },
    PageCurrentChange (p) {
      this.form.pagenum = p;
      if (this.current === 1) {
        this.getData(p);
      }
    },
    // 审批对话框
    openDialog (row) {
      this.dialogTableVisible = true;
      this.outid = row.outid;
      this.radio = '1';
      this.textarea = '';
      this.companyInfo = row;
    },
    //取消提现
    concelCash () {
      this.dialogTableVisible = false;
    },
    resultChange (r) {
      if (r === '1') this.textarea = '';
    },
    // 确定提现
    confirmCash () {
      if (this.textarea.trim() === "" && this.radio === "2") {
        this.$message({
          message: "请填写不通过原因!",
          type: "warning"
        });
        return;
      }
      let operation = this.radio === "1" ? "通过" : "驳回";
      this.$confirm(`此操作将${operation}该提现, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = {
          outid: this.outid,
          status: this.radio,
          paymentdate: '',
          note: this.textarea
        }
        this.$axios.post("/app/v1/platform/member/integerOutResult", obj).then(resp => {
          if (resp.data.code === 1) {
            this.dialogTableVisible = false;
            this.getData();
          } else {
            this.$message({
              message: resp.data.message,
              type: "error"
            });
            this.dialogTableVisible = false;
            this.getData();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除'
        });
      });
    },

    handleSizeChange (val) {
      this.Page.pageSize = val;
      if (this.current === 1) {
        this.getData();
      }
    },
    lookLog (row) {
      this.reportId = row.reportid;
      this.showLog = true;
    },
  }
}
</script>

